<template>
    <div class="other-info" v-if="otherList">
        <el-form ref="ruleForm" label-width="150px" label-position="left" class="demo-ruleForm clear" v-if="Object.keys(otherList).length != 0">
            <!-- 左侧栏 -->
            <div class="origin-info-left fl" >
                <el-form-item :label="otherList[0].field_name" >
                    <el-radio-group v-model="otherList[0].content.content" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="otherList[3].field_name" >
                    <el-radio-group v-model="otherList[3].content.content" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="otherList[8].field_name" >
                    <el-radio-group v-model="otherList[8].content.content" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="otherList[6].field_name" >
                    <el-radio-group v-model="otherList[6].content.content" @change="change1" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="otherList[11].field_name" >
                    <el-radio-group v-model="otherList[11].content.content" @change="change2" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="otherList[13].field_name" >
                    <el-radio-group v-model="otherList[13].content.content" @change="change3" :disabled="!editable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>

           <!-- 右侧栏 -->
            <div class="origin-info-right">
                <div class="origin-info-right-top clear">
                    <el-form-item :label="otherList[1].field_name" >
                        <el-radio-group v-model="otherList[1].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="otherList[2].field_name" >
                        <el-radio-group v-model="otherList[2].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="otherList[4].field_name" >
                        <el-radio-group v-model="otherList[4].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="otherList[5].field_name" >
                        <el-radio-group v-model="otherList[5].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="otherList[9].field_name" >
                        <el-radio-group v-model="otherList[9].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="otherList[10].field_name" >
                        <el-radio-group v-model="otherList[10].content.content" :disabled="!editable">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

                <div class="origin-info-right-bottom">
                    <el-form-item :label="otherList[7].field_name" >
                        <el-input v-model="otherList[7].content.content" @change.native="initValue(otherList[7])" :disabled="(otherList[6].content.content!==1 || !editable)?true:false"></el-input>
                    </el-form-item>
                    <el-form-item :label="otherList[12].field_name" >
                        <el-input v-model="otherList[12].content.content" @change.native="initValue(otherList[12])" :disabled="(otherList[11].content.content!==1 || !editable)?true:false"></el-input>
                    </el-form-item>
                    <el-form-item :label="otherList[14].field_name" >
                        <el-input v-model="otherList[14].content.content" @change.native="initValue(otherList[14])" :disabled="(otherList[13].content.content!==1 || !editable)?true:false"></el-input>
                    </el-form-item>
                </div>
            </div> 
        </el-form> 
    </div>
</template>

<script>
    export default{
        props:['editable'], 
        data(){
            return {
                otherList: {},     // 其他信息
                OtherList: {},     // 默认其他信息
            }
        },
        created() {
            // 获取表单信息
            this.getList();
        },
        mounted(){

        },
        methods: {
            /**
            * 获取信息
            * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
            */
            getList() {
                let success = (res => {
                    this.otherList = deep_clone(res.data);
                    this.OtherList = deep_clone(res.data);
                    // console.log('other:',this.otherList)
                
                });
                let params = {
                    user_id: this.$g.user_id,
                    from_type: 4,
                }
                
                this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
            },
            change1(type){
                if(type == 2){
                    console.log(this.otherList)
                    this.otherList[7].content.content = '';
                }
            },
            change2(type){
                if(type == 2){
                    this.otherList[12].content.content = '';
                }
            },
            change3(type){
                if(type == 2){
                    this.otherList[14].content.content = '';
                }
            },
            // 初始化输入框的值
            initValue(a){
                if(a.content.content === ''){
                    a.content.content = null
                }
            },
            // 表单验证
            submitForm(formName) {
                // console.log('otherList:',this.otherList)
                // console.log('OtherList:',this.OtherList)

                let param = {arr: []};
                // param.arr['user_id'] = this.$route.params.id;
                param.arr['user_id'] = this.$g.user_id;
                param.arr['other'] = [];

                this.otherList.forEach(item => {
                    let _arr = {
                        field_id: item.id,
                        content: item.content.content
                    }

                    param.arr['other'].push(_arr);
                })

                const success = (res => {
                    let status;
                    if(res.status == 'success'){
                        status = true;
                        
                        // 更新表单信息
                        this.getList();
                    }else{
                        status = false;
                    }

                    this.$emit('changeSaveStatus', status)

                })

                this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success}});
            },
            // 检测当前板块有没有修改
            contrast(){
                // console.log('otherList:',JSON.stringify(this.otherList) == JSON.stringify(this.OtherList))
                // console.log('otherList:',deep_clone(this.otherList), deep_clone(this.OtherList))
                return JSON.stringify(this.otherList) == JSON.stringify(this.OtherList)
            },
            // 取消编辑
            cancelEdit(){
                this.otherList = deep_clone(this.OtherList);
            },
        }
    }
</script>
<style lang="scss">
    #schoolroll{
        .index-container{
            .other-info{
                .el-form{
                    .el-form-item{
                        .el-form-item__label{
                            padding:0;
                            font-size: 14px;
                            color: #333333;
                            letter-spacing: 0.08px;
                            &::before{
                                content:''
                            }
                        }
                        .el-form-item__content{
                            // 单选框
                            .el-radio-group{
                                .el-radio{
                                    .el-radio__input{
                                        .el-radio__inner:hover{
                                            border-color: #3bb;
                                        }
                                    } 
                                }

                                // 被选中后的样式
                                .el-radio.is-checked{
                                    .el-radio__input.is-checked{
                                        .el-radio__inner{
                                            border-color: #3bb;
                                            background: #3bb;
                                            &:hover{
                                                border-color: #3bb;
                                            }
                                        }
                                    } 
                                    .el-radio__label{
                                        color:#606266;
                                    }
                                }
                            }
                            
                            // input框不可编辑时的样式
                            .el-input.is-disabled{
                                .el-input__inner{
                                    color: #333;
                                    border-radius:0;
                                    background-color: #EFEFEF;
                                    border-color: #DDDDDD;
                                }
                            }
                        }
                    }
                    
                    .origin-info-left{
                        width:400px !important;
                    }
                    .origin-info-right{
                        width:auto !important;
                        overflow:hidden;
                        .origin-info-right-top{
                            .el-form-item{
                                &:nth-child(odd){
                                    float:left;
                                }
                                &:nth-child(even){
                                    float:right;
                                }
                            }
                        }
                        .origin-info-right-bottom{

                        }
                    }
                }
            }
        }
    }
</style>